<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-operation" *ngIf="!isDetail">
    <lv-group>
        <lv-group lvGutter="8px">
            <button lv-button (click)="allSelect(true)" [disabled]="!qosData?.length">
                {{buttonLabel}}
            </button>
        </lv-group>
        <lv-group></lv-group>
    </lv-group>
</div>

<div class="list-container">
    <lv-datatable [lvData]='qosData' #lvTable lvResize lvSelectionMode='multiple' [lvSelection]='qosSelection'
        lvResizeMode="expand" [lvScroll]="{ x: '100%' }" (lvSelectionChange)="selectionChange($event)"
        lvCompareWith="uuid">
        <thead>
            <tr>
                <th lvShowCheckbox width='40px' [lvRowsData]="lvTable.renderData" *ngIf="!isDetail"
                    [lvDisabled]="isAllSelect"></th>
                <th lvCellKey='name' lvShowCustom>
                    {{'common_name_label' | i18n}}
                    <div lvCustom>
                        <aui-custom-table-search (search)="searchByName($event)"
                            filterTitle="{{'common_name_label' | i18n}}"></aui-custom-table-search>
                    </div>
                </th>
                <th lvCellKey='speed_limit' *ngIf="language.EN === i18n.language">
                    {{'protection_max_bandwidth_label' | i18n}}&nbsp;(MB/s)</th>
                <th lvCellKey='speed_limit' *ngIf="language.EN !== i18n.language">
                    {{'protection_max_bandwidth_label' | i18n}}(MB/s)</th>
                <th lvCellKey='desc'>{{'common_desc_label' | i18n}}</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor='let item of lvTable.renderData'>
                <tr>
                    <td lvShowCheckbox width='40px' [lvRowData]='item' *ngIf="!isDetail" [lvDisabled]="item.disabled">
                    </td>
                    <td>
                        <span lv-overflow>{{item.name}}</span>
                    </td>
                    <td>
                        <span>{{item.speed_limit}}</span>
                    </td>
                    <td>
                        <span lv-overflow>{{item.description | nil}}</span>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
    <div class="aui-paginator-wrap">
        <lv-paginator [lvPageSize]="pageSize" [lvTotal]="total" [lvPageIndex]="pageIndex"
            (lvPageChange)="pageChange($event)" [lvPageSizeOptions]="sizeOptions" [hidden]="!total">
        </lv-paginator>
    </div>
</div>